<template>
  <div>
    <ul class="CiscoAnyconnect-content1">
      <li>
        <span>服务器地址</span>
        <el-input v-model="server" placeholder="请输入服务器地址"></el-input>
        <el-button @click="copyLink1(server)" class="tag">复制</el-button>
      </li>
      <li>
        <span>服务器账号</span>
        <el-input v-model="serverAccountNumber" placeholder="请输入服务器账号"></el-input>
        <el-button @click="copyLink1(serverAccountNumber)" class="tag">复制</el-button>
      </li>
      <li>
        <span>服务器密码</span>
        <el-input v-model="serverPassword" placeholder="请输入服务器密码"></el-input>
        <el-button @click="copyLink1(serverPassword)" class="tag">复制</el-button>
      </li>
    </ul>
    <ul class="CiscoAnyconnect-content1">
      <li>
        <span>vpn账号</span>
        <el-input v-model="vpnAccountNumber" placeholder="请输入vpn账号"></el-input>
        <el-button @click="copyLink1(vpnAccountNumber)" class="tag">复制</el-button>
      </li>
      <li>
        <span>vpn密码</span>
        <el-input v-model="vpnPassword" placeholder="请输入vpn密码"></el-input>
        <el-button @click="copyLink1(vpnPassword)" class="tag">复制</el-button>
      </li>
      <li>
        <el-button type="primary" @click="confirmStartOperation" class="tag">确定开始操作</el-button>
      </li>
    </ul>
    <ul class="CiscoAnyconnect-content2">
      <li v-for="(item,key) in dataJson" :key="key">
        <el-button :type="item.butType" @click="copyLink(item.text,key)" class="tag">复制</el-button>
        <span>{{ item.text }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import Clipboard from 'clipboard'

export default {
  components: {},
  props: [],
  data() {
    return {
      server: '',//服务器地址
      serverAccountNumber: 'root',//服务器账号
      serverPassword: 'lanbo123!@#',//服务器密码
      vpnAccountNumber: '',//vpn账号
      vpnPassword: '',//vpn密码
      vica: `cn = "名称"
organization = "名称.IM"
serial = 1
expiration_days = 9999
ca
signing_key
cert_signing_key
crl_signing_key`,
      vica2: `cn = "服务器地址"
organization = "zdhpr7.IM"
expiration_days = 9999
signing_key
encryption_key
tls_www_server`,
      vica3: 'ocpasswd -c /etc/ocserv/ocpasswd pgeigo',
      dataJson: [
        //  text 复制的内容  butType 按钮颜色执行到哪步了好分辨
        {text: 'cd ..', butType: '',},
        {text: 'yum -y install epel-release', butType: '',},
        {text: 'yum -y install ocserv', butType: '',},
        {text: 'mkdir ssl', butType: '',},
        {text: 'cd ssl', butType: '',},
        {text: 'vi ca.tmpl', butType: '',},
        {text: 'vica 用来生成的', state: 1, butType: '',}, //vica 用来生成的
        {text: 'certtool --generate-privkey --outfile ca-key.pem', butType: '',},
        {text: 'certtool --generate-self-signed --load-privkey ca-key.pem --template ca.tmpl --outfile ca-cert.pem', butType: '',},
        {text: 'vi server.tmpl', butType: '',},
        {text: 'vica2 用来生成的', state: 2, butType: '',},//vica2 用来生成的
        {text: 'certtool --generate-privkey --outfile server-key.pem', butType: '',},
        {
          text: 'certtool --generate-certificate --load-privkey server-key.pem --load-ca-certificate ca-cert.pem --load-ca-privkey ca-key.pem --template server.tmpl --outfile server-cert.pem',
          butType: '',
        },
        {text: 'cp server-cert.pem /etc/pki/ocserv/public/', butType: '',},
        {text: 'cp server-key.pem /etc/pki/ocserv/private/', butType: '',},
        {text: 'cp ca-cert.pem /etc/pki/ocserv/cacerts/', butType: '',},
        {text: '用软件打开', butType: '',},
        {text: '/etc/ocserv/', butType: '',},
        {text: 'server-cert = /etc/pki/ocserv/public/server-cert.pem', butType: '',},
        {text: 'server-key = /etc/pki/ocserv/private/server-key.pem', butType: '',},
        {text: 'ca-cert = /etc/pki/ocserv/cacerts/ca-cert.pem', butType: '',},
        {text: '用来生成的', state: 3, butType: '',},//vica3 用来生成的
        {text: 'echo 1 > /proc/sys/net/ipv4/ip_forward', butType: '',},
        {text: 'systemctl start firewalld.service', butType: '',},
        {text: 'firewall-cmd --permanent --zone=public --add-port=443/tcp', butType: '',},
        {text: 'firewall-cmd --permanent --zone=public --add-port=443/udp', butType: '',},
        {text: 'firewall-cmd --permanent --add-masquerade', butType: '',},
        {text: 'firewall-cmd --permanent --direct --passthrough ipv4 -t nat -A POSTROUTING -o eth0 -j MASQUERADE', butType: '',},
        {text: 'firewall-cmd --reload', butType: '',},
        {text: 'ocserv -f -d 1', butType: '',},
        {text: 'systemctl enable ocserv', butType: '',},
        {text: 'systemctl start ocserv', butType: '',},
        {text: 'service ocserv restart', butType: '',},
      ]
    }
  },
  mounted() {
  },
  methods: {
    //确定开始操作
    confirmStartOperation() {
      if (!this.server || !this.serverAccountNumber || !this.serverPassword || !this.vpnAccountNumber || !this.vpnPassword) {
        this.$message.error('该填写的内容不能为空');
        return false
      }
      for (let i = 0; i < this.dataJson.length; i++) {
        this.dataJson[i].butType = '';
        if (this.dataJson[i].state == 1) {
          let vica = `cn = "${this.vpnAccountNumber}"
organization = "${this.vpnAccountNumber}.IM"
serial = 1
expiration_days = 9999
ca
signing_key
cert_signing_key
crl_signing_key`;
          this.dataJson[i].text = vica;
          continue
        }
        if (this.dataJson[i].state == 2) {
          let vica2 = `cn = "${this.server}"
organization = "${this.vpnAccountNumber}.IM"
expiration_days = 9999
signing_key
encryption_key
tls_www_server`;
          this.dataJson[i].text = vica2;
          continue
        }
        if (this.dataJson[i].state == 3) {
          let vica3 = `ocpasswd -c /etc/ocserv/ocpasswd ${this.vpnAccountNumber}`;
          this.dataJson[i].text = vica3;
          continue
        }
      }
    },
    //复制服务器vpn等操作
    copyLink1(data) {
      let clipboard = new Clipboard('.tag', {
        text: function () {
          return data
        }
      })
      clipboard.on('success', e => {
        console.log(e);
        this.$message({message: '复制成功', showClose: true, type: 'success'})
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log(e);
        this.$message({message: '复制失败,', showClose: true, type: 'error'})
        clipboard.destroy()
      })
    },
    //复制架构操作
    copyLink(data, key) {
      let clipboard = new Clipboard('.tag', {
        text: function () {
          return data
        }
      })
      clipboard.on('success', e => {
        console.log(e);
        this.dataJson[key].butType = 'success';
        this.$message({message: '复制成功', showClose: true, type: 'success'})
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log(e);
        this.$message({message: '复制失败,', showClose: true, type: 'error'})
        clipboard.destroy()
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.CiscoAnyconnect-content1 {
  @include flex();
  margin-bottom: 10px;

  li {
    @include flex();

    span {
      width: 80px;
      flex: 0 0 auto;
      text-align: center;
    }

    .el-button--small {
      margin-left: 8px;
    }
  }
}

.CiscoAnyconnect-content2 {
  li {
    margin-bottom: 5px;
  }

  .el-button--small {
    margin-right: 8px;
  }
}
</style>
